<template>
  <div class="dashboard">
    <div class="left">
      <region-echarts class="region" />
    </div>
    <div class="right">
      <div class="center-right">
        <div>
          <role-echarts :data-list="roleDistributionList" class="role" />
        </div>
        <div>
          <time-echarts class="time" />
        </div>
      </div>
      <views-echarts class="views" />
    </div>

  </div>
</template>

<script>
import Time from '@/components/myEcharts/time.vue'
import Region from '@/components/myEcharts/region.vue'
import Role from '@/components/myEcharts/role.vue'
import Views from '@/components/myEcharts/views.vue'

import { getRoleDistribution } from '@/api/datav.js'

export default {
  name: 'Dashboard',
  components: {
    'time-echarts': Time,
    'region-echarts': Region,
    'role-echarts': Role,
    'views-echarts': Views
  },
  data() {
    return {
      roleDistributionList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 数据初始化
    async init() {
      const [roleDistributionList] = await Promise.all([getRoleDistribution()])
      this.roleDistributionList = roleDistributionList
    }
  }

}
</script>

<style scoped>

.time{
  width:400px;
  height:340px;

}

.region{
  width:700px;
  height:700px;
  margin-left:50px;
}

.role{
  width:400px;
  height:300px;
  margin-top:50px;
}

.dashboard{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.center-right{
  display: flex;
  flex-direction: row;
  height:300px
}

.left{
  width: 600px;
  height: 100%;
}

.views{
  width:800px;
  height:400px;
}

</style>
